		<?php
include 'config.php';
include 'functions.php';?>
<!doctype HTML>
<title>Index</title>
<html>
	<head>
	
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="js/masonry.pkgd.js"></script>
		<link href="css/styles.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		
<div id='container2' class="containerwidth">	

<?php

$query = "
SELECT  *
FROM  lexsettings
LEFT JOIN skill_response USING (lexid)
LEFT JOIN context_response USING (lexid)
LEFT JOIN reflection USING (lexid)
	WHERE userid = '$userid'";


	$result = mysqli_query($con,$query) or die ("Could not get the user lex information");
	$nrows = mysqli_num_rows($result);
	echo "Number of lexes belonging to userid 1:". $nrows;
	while ($row = mysqli_fetch_array($result))
		{
	extract($row);
	echo "<div class='lex'>";//start lex
	
	//title
	echo "<h2>". $lextitle . "</h2>";
	echo "<div class=''><h3>Created</h3>". $lexcreated . "</div>";
	
	//contexts
	
	/*$contexts = $context;
	$context = explode(",", $contexts);//split them at the comma */
	echo "<div><h3>Context</h3><ul>";
	
	/*foreach ($context as $value) {
		echo "<li>". $value . "</li>";
			}*/
	if ($context1 != null)
			{
	echo "<div class=''>". $context1 . "</div>";
			}
			if ($context2 != null)
			{
	echo "<div class=''>". $context2 . "</div>";
			}
		if ($context3 != null)
			{
	echo "<div class=''>". $context3 . "</div>";
			}	
	echo "</ul></div>
	

	";
	
	//skills
	$skills = $skill;
	$skill = explode(",", $skills);//split them at the comma
	echo "<div><h3>Skill</h3><ul>";
	
	if ($skill1 != null)
			{
	echo "<div class=''>". $skill1 . "</div>";
			}
	if ($skill2 != null)
			{
	echo "<div class=''>". $skill2 . "</div>";
			}
			if ($skill3 != null)
			{
	echo "<div class=''>". $skill3 . "</div>";
			}
			if ($skill4 != null)
			{
	echo "<div class=''>". $skill4 . "</div>";
			}
			if ($skill5 != null)
			{
	echo "<div class=''>". $skill5 . "</div>";
			}
			if ($skill6 != null)
			{
	echo "<div class=''>". $skill6 . "</div>";
			}
			if ($skill7 != null)
			{
	echo "<div class=''>". $skill7 . "</div>";
			}
	echo "</ul></div>";
	
	if($lexprivacy == "1"){
		$checkedPrivacy = "checked";
	}
else {
		$checkedPrivacy = "";
	}
		if($lexcommenting == "1"){
		$checkedCommenting = "checked";
	}
else {
		$checkedCommenting = "";
	}
	//personal settings
 	echo "<h3>Privacy</h3>
			<div>

				<input type='checkbox' name='cb_allowprivate' id='cb_allowprivate' selected='true' $checkedPrivacy/>
				<label for='cb_allowprivate'></label>

			</div>
			<h3>Commenting</h3>
			<div>

				<input type='checkbox' name='cb_allowcommenting' id='cb_allowcommenting' $checkedCommenting/>
				<label for='cb_allowcommenting'></label>

			</div>
			";
	//reflection
	echo "<div class=''><h3>Reflection</h3>". $reflection . "</div>";
	
	//commentary
	if ($lexcommenting == 1){
	echo "<div class=''><h3>Commentary</h3>". "</div>";}
	echo "</div>";	//end lex	
		}
?>
<!-- by context -->
<form action='filterlex.php' method="post">
<select name="slct_context[]">
<option value=''></option>
  <option value='personal'>home</option>
  <option value='work'>work</option>
   <option value='academic'>academic</option>
</select>
<input type="submit" value="Go" name="btn_context">
</form> 

<!-- by skill -->
<form action='lex.php' method="post">
<select name="slct_skill[]">
<option value=''></option>
  <option value="Critical-thinking and problem-solving">Critical-thinking and problem-solving</option>
  <option value="Creativity and innovation">Creativity and innovation</option>
   <option value="Collaboration, teamwork and leadership" >Collaboration, teamwork and leadership</option>
     <option value="Cross-cultural understanding">Cross-cultural understanding</option>
  <option  value="Communication and media fluency">Communication and media fluency</option>
   <option value="Computing and ICT fluency">Computing and ICT fluency</option>
     <option value="Career and learning self-reliance">Career and learning self-reliance</option>
</select>
<input type="submit" value="Go" name="btn_skills">
</form> 

</div>	

		<script>
			var container = document.querySelector('#container2');
			var msnry = new Masonry(container, {
				// options
				columnWidth :400,
				itemSelector : '.lex'
			}); 
</script>




</html>
